<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar fixed placeholder title="川菜" @click-left="$router.go(-1)" @click-right="showShare = true">
      <template #left>
        <van-icon color="#ee0a24" name="arrow-left" size="18" />
      </template>
      <template #right>
        <van-icon color="#ee0a24" name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 分享 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- 卡片列表 -->
      <van-card
        @click="$router.push('/cookdetail')"
        thumb="/img/chuan.jpg"
        v-for="value in 20"
        :key="value"
        style="background-color: #fff; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%)"
      >
        <template #title>
          <div class="title" style="font-size: 16px">口水鸡</div>
        </template>
        <template #desc>
          <div class="desc">鸡腿、大葱、生姜、香菜、小米辣</div>
        </template>
        <template #footer>
          <div style="color: #aaa">
            <!-- 点赞 -->
            <span style="display: inline-block; margin: 0 10px 0 20px">125</span>
            <van-icon
              size="16"
              name="good-job-o"
              @click.stop="giveLike"
              :class="{ active: countLike % 2 != 0 }"
            />
            <!-- 收藏 -->
            <span style="display: inline-block; margin: 0 10px 0 20px">125</span>
            <van-icon size="16" name="star-o" />
          </div>
        </template>
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countLike: 0,
      isLoading: false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  methods: {
    onRefresh() {
      setInterval(() => {
        this.isLoading = false
      }, 1000)
    },
    giveLike() {
      this.countLike++
      if (this.countLike % 2 != 0) {
        console.log(this.countLike)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin: 5px 0 10px 0;
  font-size: 1.6em !important;
  font-weight: 700;
}
.desc {
  font-size: 1.2em;
  width: 60vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #aaa;
}
.active {
  color: #ee0a24;
}
</style>
